import { getSelfNodeIcon } from "@system/menu/store";
import UserDetail from "@user/pay/userDetail";

export const renderSwitch = function (checked, ...attrs) {
  return <a-switch v-model:checked={checked.value} {...attrs} />;
};
export const renderCheckBox = function (object, key, title = "", ...attrs) {
  const checked = toRef(object, key);
  return (
    <a-checkbox v-model:checked={checked.value} {...attrs}>
      {title}
    </a-checkbox>
  );
};
export const renderToolTip = function (object: any = {}) {
  // @ts-ignore
  object = { ...object, ...this };
  const {
    value = "",
    length = 6,
    placement = "top",
    className = "s-table-body_cell",
    defaultValue = "",
    title = "",
    trigger = "hover",
    color = "",
    slots = {},
    ...attrs
  } = object;
  const $default =
    slots.defaultValue ||
    defaultValue ||
    (isString(value) && value.length ? (
      <i>{value.slice(0, length) + "..."}</i>
    ) : null);
  const $title = slots.title || title || <i>{value}</i>;
  const Node = (
    <a-tooltip placement={placement} trigger={trigger} color={color} {...attrs}>
      {{
        default: $default,
        title: $title,
      }}
    </a-tooltip>
  );
  const boolean =
    slots.defaultValue ||
    slots.title ||
    defaultValue ||
    title ||
    value?.length > length;
  return <div class={className}>{boolean ? Node : value}</div>;
};

export const renderAgree = function (object: any = {}) {
  // @ts-ignore
  object = { ...object, ...this };
  const { record, handleAction, identify = "" } = object;
  return (
    <s-button
      type="link"
      onClick={() => handleAction({ record, type: "agree" })}
      icon={identify ? renderIcon(getSelfNodeIcon(identify)) : null}
    >
      {$t("base.agree")}
    </s-button>
  );
};
export const renderRefuse = function (object: any = {}) {
  // @ts-ignore
  object = { ...object, ...this };
  const { record, handleAction, identify = "" } = object;
  return (
    <s-button
      type="link"
      onClick={() => handleAction({ record, type: "refuse" })}
      icon={identify ? renderIcon(getSelfNodeIcon(identify)) : null}
    >
      {$t("base.refuse")}
    </s-button>
  );
};
export const renderDisable = function (object: any = {}) {
  // @ts-ignore
  object = { ...object, ...this };
  const { record, handleAction, identify = "" } = object;
  return (
    <s-button
      type="link"
      onClick={() => handleAction({ record, type: "update->status" })}
      icon={renderIcon(
        getSelfNodeIcon(identify)
          ? record.status === 0
            ? "icon-qiyong"
            : "icon-tingyong"
          : ""
      )}
    >
      {+record.status === 0 ? $t("base.disable") : $t("base.enable")}
    </s-button>
  );
};
export const renderUpdate = function (object: any = {}) {
  // @ts-ignore
  object = { ...object, ...this };
  const { record, handleAction, identify = "" } = object;
  return (
    <s-button
      type="link"
      onClick={() => handleAction({ record, type: "update" })}
      icon={identify ? renderIcon(getSelfNodeIcon(identify)) : null}
    >
      {$t("base.edit")}
    </s-button>
  );
};
export const renderDetail = function (object: any = {}) {
  // @ts-ignore
  object = { ...object, ...this };
  const { record, handleAction, identify = "" } = object;
  return (
    <s-button
      onClick={() => handleAction({ record, type: "view" })}
      type="link"
      icon={identify ? renderIcon(getSelfNodeIcon(identify)) : null}
    >
      {$t("base.detail")}
    </s-button>
  );
};
export const renderDelete = function (object: any = {}) {
  // @ts-ignore
  object = { ...object, ...this };
  const { record, handleAction, identify = "" } = object;
  return (
    <s-button
      type="link"
      onClick={() => handleAction({ record, type: "delete" })}
      icon={identify ? renderIcon(getSelfNodeIcon(identify)) : null}
    >
      {$t("base.delete")}
    </s-button>
  );
};
export const renderIndex = function (object: any = {}) {
  // @ts-ignore
  object = { ...object, ...this };
  const { index, tablePage } = object;
  return (
    <div class="s-table-body_cell">
      <i>{index + 1 + (tablePage.current - 1) * tablePage.pageSize}</i>
    </div>
  );
};
export const renderCreatedAt = function (object: any = {}) {
  // @ts-ignore
  object = { ...object, ...this };
  const { value } = object;
  return (
    <div class="s-table-body_cell">
      <i>{getTimeByZone(value)}</i>
    </div>
  );
};
export const renderUserInfo = function (object: any = {}) {
  // @ts-ignore
  object = { ...object, ...this };
  // @ts-ignore
  const {
    record,
    tableLoading,
    isDisplay = false,
    is_enable_click = true,
  } = object;
  const data = {
    avatar: record?.value?.avatar ?? record.avatar,
    nickname: record?.value?.nickname ?? record.nickname,
    uid: record?.value?.uid ?? record.uid,
    sex: record?.value?.sex ?? record.sex,
  };
  return (
    <div class="s-table-body_cell">
      <UserDetail
        spinning={tableLoading}
        record={data}
        isDisplay={isDisplay}
        is_enable_click={is_enable_click}
      />
    </div>
  );
};
export const renderIcon = (
  className = "",
  clickName: Function | null = null,
  style = ""
) => (
  // @ts-ignore
  <i class={`s-icon iconfont ${className}`} onClick={clickName} style={style} />
);
